<template>
  <transition name="slide-fade">
    <vue-draggable-resizable
    style="z-index: 999;"
    v-if="visible"
    class-name="c-draggable"
    :w="x_width"
    :h="130"
    @dragging="onDrag"
    :resizable="false">

    <!--展开-->
    <div  v-if="expand" style="padding: 5px 8px;overflow-y: auto;" class="g-flex-col g-x-between">
      <div style="color: #3399FF;font-size: 16px;height: 30px;line-height: 30px;">{{print_call_state}}...</div>
      <!--不是来电-->
      <template v-if="call_type!='incoming'">
        <div class="g-flex g-x-between" style="height: 30px;">
          <div><span>客户：</span><span>{{ call_res.name?call_res.name:'未知' }}</span></div>
          <div style="margin-right: 15px;" >
            <span>卡号：</span>
            <span @click="toDetails(call_res)" v-if="call_res.cardNo" style="color: #3399ff;cursor: pointer;">{{ call_res.cardNo }}</span>
            <span v-else >未知</span>
          </div>
        </div>
        <div class="g-flex g-x-between g-y-center" style="margin-top: 10px;">
          <span style="color: #000000;font-size: 20px;">{{ call_res.contactContent }}</span>
          <a-button style="background: #FF1010;border-radius: 16px; color: #ffffff;" @click="closeTel">挂断</a-button>
        </div>
      </template>
      <!--来电-->
      <template v-else>
        <div class="g-flex g-x-between" style="height: 30px;">
          <div><span>客户：</span><span>{{ incoming_value.name?incoming_value.name:'未知' }}</span></div>
          <div style="margin-right: 15px;" >
            <span>卡号：</span>
            <span @click="toDetails(incoming_value)" v-if="incoming_value.cardNo" style="color: #3399ff;cursor: pointer;">{{ incoming_value.cardNo }}</span>
            <span v-else >未知</span>
          </div>
        </div>
        <div class="g-flex g-x-between g-y-center" style="margin-top: 10px;">
          <span style="color: #000000;font-size: 20px;">{{ incoming_value.contactContent }}</span>
          <a-button style="background: #FF1010;border-radius: 16px; color: #ffffff;" @click="closeTel">挂断</a-button>
          <a-button v-if="print_call_state=='呼入中'" style="background: #3399FF;border-radius: 16px; color: #ffffff;" @click="clickOnAnswer">接听</a-button>
        </div>
      </template>
    </div>
    <!--收缩-->
    <div v-else style="padding: 10px 15px;" class="g-flex-col g-y-center">
      <img :src="require('@/assets/phone1.png')" style="width: 45px;height: 45px;">
      <p style="color: #3399FF;font-size: 16px;line-height: 20px;margin: 10px 0 0;  ">{{print_call_state}}...</p>
      <p v-if="call_type=='incoming'" style="color: #3399FF;font-size: 16px;margin: 0;"> {{incoming_value}}</p>
      <p v-else style="color: #3399FF;font-size: 16px;margin: 0;"> {{call_res.contactContent}}</p>
      <div class="g-flex g-x-between" style="margin-bottom: 10px;">
        <a-button style="background: #FF1010;border-radius: 16px; color: #ffffff;" @click="closeTel">挂断</a-button>
        <a-button v-if="print_call_state=='呼入中'" style="background: #3399FF;border-radius: 16px; color: #ffffff;" @click="clickOnAnswer">接听</a-button>
      </div>
    </div>
  </vue-draggable-resizable>
  </transition>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import Bus from '@/utils/bus'
import { mapState, mapActions } from 'vuex'
export default {
  components:{
    VueDraggableResizable
  },
  data () {
    return {
      expand:true,
      // visible:false,
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      // phone:''
    }
  },
  mounted() {
    Bus.$on('hangup',()=>{
      this.$store.commit('phoneBox/setCallVisible',false)
    })
  },
  computed:{
    ...mapState({
      print_call_state:state=>state.phoneBox.call.call_state,
      call_type:state=>state.phoneBox.call.call_type,
      visible:state=>state.phoneBox.call.visible,
      incoming_value:state=>state.phoneBox.call.value,
      call_res:state=>state.phoneBox.customer,
    }),
    x_width(){
      if(this.expand){
        return 314
      }else{
        return 150
      }
    },
    x_height(){
      if(this.expand){
        return 130
      }else{
        return 170
      }
    },
  },
  methods: {
    toDetails(customer){
      console.log('客户信息',customer)
      this.$router.push({path:'customer_details',query:{
          id:customer.customerId,
          card_no:customer.cardNo,
          customerName:customer.customerName
      }})
    },
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    },
    show(){
      this.visible=true
    },
    closeTel(){
      // this.$emit('closeTel')
      Bus.$emit('hangup')
      Bus.$emit('OnHangup')
      this.$store.commit('phoneBox/setCallVisible',false)
    },
    clickOnAnswer(){
      Bus.$emit('OnAnswer')
    },
  }
}
</script>

<style lang="less" scoped>
.c-draggable{
  cursor: pointer;
  position: fixed;
  z-index: 999;
  right:10px;
  top: 10%;
  width: 314px;
  background: #FFFFFF;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px 0px 0px 4px;
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

</style>